<template>
  <div class="redact">
    <img src="../../assets/ico.png" alt="" />
    <h3>编辑签约信息</h3>
    <el-divider border-style="double" />
    <h4>居民信息</h4>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="box1">
          <el-form-item label="姓名">
            <el-input v-model="input" placeholder="请输入" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box2">
          <el-form-item label="身份证号">
            <el-input v-model="input1" placeholder="请输入" />
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="box3">
          <el-form-item label="性别">
            <el-select v-model="formInline.region1" placeholder="请选择">
              <el-option label="男" value="shanghai" />
              <el-option label="女" value="shanghai" />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <div class="bttom">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="box">
            <el-form-item label="出生年月">
              <div class="demo-date-picker">
                <div class="block">
                  <el-date-picker
                    v-model="value1"
                    type="date"
                    placeholder="选择日期"
                    :size="size"
                  />
                </div>
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box2">
            <el-form-item label="联系电话">
              <el-input v-model="input2" placeholder="请输入" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box4">
            <el-form-item label="现居地">
              <el-input v-model="input3" placeholder="请输入" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <span class="family">家庭成员</span>
      <div class="member">
        <el-row :gutter="12">
          <el-col :span="5">
            <el-card shadow="hover"> Hover </el-card>
          </el-col>
          <el-col :span="5">
            <el-card shadow="hover"> Hover </el-card>
          </el-col>
        </el-row>
      </div>
      <el-divider border-style="double" />
    </div>
    <!-- 签约信息 -->
    <h4>签约信息</h4>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约编号</span>
          <span class="">20190009091</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">签约状态</span>
          <span>待审核</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <el-form-item label="签约机构">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="罗西服务中心" value="罗西服务中心" />
              <el-option label="天明服务中心" value="天明服务中心" />
              <el-option label="天天服务中心" value="天天服务中心" />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box4">
          <el-form-item label="签约团队">
            <el-select v-model="formInline.region1" placeholder="请选择">
              <el-option label="李青青团队" value="李青青团队" />
              <el-option label="王文文团队" value="王文文团队" />
              <el-option label="渣渣辉团队" value="渣渣辉团队" />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="box1">
          <el-form-item label="签约医生">
            <el-select v-model="formInline.region2" placeholder="请选择">
              <el-option label="李青青" value="李青青" />
              <el-option label="王文文" value="王文文" />
              <el-option label="渣渣辉" value="渣渣辉" />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="box2">
          <el-form-item label="服务包">
            <el-select v-model="formInline.region3" placeholder="请选择">
              <el-option label="请选择" value="请选择" />
              <el-option label="基础包&yen;240" value="基础包" />
              <el-option label="老年包&yen;888" value="老年包" />
            </el-select>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    <!--  -->
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">签约类型</span>
          <span class="">首次签约</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box2">
          <span class="qy">签约周期 </span>
          <span>1年</span>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="box3">
          <span class="qy">费用</span>
          <span>&yen;120</span>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="7">
        <div class="box1">
          <span class="qy">申请时间</span>
          <span class=""> 2020/10/09</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box2">
          <el-form-item label="生效日期">
            <div class="demo-date-picker">
              <div class="block">
                <el-date-picker
                  v-model="value1"
                  type="date"
                  placeholder="选择日期"
                  :size="size"
                />
              </div>
            </div>
          </el-form-item>
        </div>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="20">
          <div class="box2">
            <el-form-item label="签约备注">
              <el-input
                v-model="textarea"
                :rows="2"
                type="textarea"
                placeholder="请输入签约备注"
                resize="none"
              />
            </el-form-item>
          </div>
      </el-col>       
    </el-row>

    <el-divider border-style="double" />
    <el-row class="mb-4">
      <el-button :plain="true" type="warning" @click="open2">保存</el-button>
      <el-button @click="backtrac">返回</el-button>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { reactive } from "vue";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const textarea = ref('')
const router = useRouter();
const value2 = ref("");
const input = ref("");
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");

const save = () => {

  // router.push("/signing-management/particulars");
};
const backtrac = () => {
  console.log("绑定事件成功");
  router.push("/signing-management/particulars");
};
const formInline = reactive({
  user: "",
  region: "",
  region1: "",
  region2: "",
  region3: "",


});
const size = ref<"" | "large" | "small">("");

const value1 = ref("");
// const value2 = ref('')

const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
const open2 = () => {
  ElMessage({
    message: '保存成功',
    type: 'success',
  })
  router.push("/signing-management/particulars");
}
</script>

<style lang="less" scoped>
:deep(.el-textarea__inner){ 
  width: 450px;
  height: 130px;
}
img {
  // width: 15px;
  height: 30px;
  margin-top: 20px;
  display: inline-block;
}
h3 {
  margin-left: 30px;
  display: inline-block;
  // margin-top: 20px;
  margin-left: 15px;
}
h4 {
  margin-left: 30px;
}
.box1 {
  display: inline-block;
  margin-left: 50px;
  .xinmin {
    margin-right: 30px;
  }
}
.box2 {
  display: inline-block;
  .id {
    margin-right: 30px;
  }
}
.box3 {
  display: inline-block;
  .sex {
    margin-right: 30px;
  }
}
.box4 {
  display: inline-block;
  margin-left: 48px;
  .age {
    margin-right: 30px;
  }
}
.bttom {
  // margin-top: 40px;
}
.box {
  margin-left: 30px;
}
.family {
  // margin-top: 25px;
  margin-left: 30px;
  display: inline-block;
}
.lq {
  // display: inline-block;
  background-color: pink;
  width: 200px;
  height: 80px;
  margin-left: 110px;
  margin-top: -25px;
}
.wl {
  // display: inline-block;
  background-color: pink;
  width: 200px;
  height: 80px;
  margin-left: 349px;
  // margin-top: -81px;
}
.el-card {
  height: 80px;
  // margin-left: 40px;
  // display: block;
}
.member {
  margin-left: 107px;
  // margin-top: -22px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.box {
  margin-top: 10px;
}
.demo-date-picker {
  margin-top: -38px;
}
el-id-2433-9 {
  margin-top: -20px;
}
.el-row {
  margin-top: 20px;
}
.qy {
  // margin-left: 20px;
  margin-right: 20px;
}
.redact{
 font-size: 14px;
}

</style>